<template>
    <div>
        <div class="seach">
            <span>
                {{$t('sta')}}
                <el-select v-model="smsChnlForm.status" :placeholder="$t('plsset')" size="mini">
                    <el-option :label="'-' + $t('plsset') + '-'" :value="null"></el-option>
                    <el-option :label="$t('vlid')" value="VALID"></el-option>
                    <el-option :label="$t('invlid')" value="INVALID"></el-option>
                </el-select>
            </span>
            <el-button type="primary" @click="seachsmschnList" v-preventReClick>{{$t('qury')}}</el-button>
            <el-button type="warning" @click="showAddchn" v-preventReClick>{{$t('add')}}</el-button>
        </div>
        <!-- 内容区域 -->
        <el-card class="cardBox">
            <el-table border style="width: 100%" :data="smsChnlTab">
                <el-table-column type="index" :label="$t('sernum')">
                </el-table-column>
                <el-table-column prop="channelSmsType" :label="$t('smschntp')">
                </el-table-column>
                <el-table-column prop="channelName" :label="$t('smschnname')">
                </el-table-column>
                <el-table-column prop="channelCode" :label="$t('smschncode')">
                </el-table-column>
                <el-table-column prop="account" :label="$t('sigtr')">
                </el-table-column>
                <el-table-column prop="status" :label="$t('sta')">
                </el-table-column>
                <el-table-column prop="address" :label="$t('opratn')" width="90" fixed="right">
                    <template slot-scope="scope">
                        <el-link type="primary" @click="showEditsmsChnl(scope.row)">{{$t('mdfy')}}</el-link>
                        <el-link type="primary" @click="showDelsmsChnl(scope.row.msgChannelId)">{{$t('dlte')}}</el-link>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="smsChnlForm.pageNum"
                :page-sizes="[10, 15, 20, 30]"
                :page-size="smsChnlForm.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </el-card>
        <el-dialog :title="$t('add')" :visible.sync="addDialogVisible" width="30%" @close="addDialogVisibleClosed(addchnForm)" center :close-on-click-modal="isOk" :modal-append-to-body="false">
            <el-form :ref="addchnForm" :rules="addchnRules" :model="addchnForm" label-width="80px" :hide-required-asterisk="true">
                <el-form-item :label="$t('chnnumber')" prop="channelCode">
                    <el-input v-model.trim="addchnForm.channelCode" :placeholder="$t('plsipt')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('chnlnam')" prop="channelName">
                    <el-input v-model.trim="addchnForm.channelName" :placeholder="$t('plsipt')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('accnumber')" prop="account">
                    <el-input v-model.trim="addchnForm.account" :placeholder="$t('plsipt')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('pwd')" prop="password">
                    <el-input v-model.trim="addchnForm.password" :placeholder="$t('plsipt')" show-password></el-input>
                </el-form-item>
                <el-form-item :label="$t('requrl')" prop="reqUrl">
                    <el-input v-model.trim="addchnForm.reqUrl" :placeholder="$t('plsipt')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('smschntyp')" prop="channelSmsType">
                    <el-input v-model.trim="addchnForm.channelSmsType" :placeholder="$t('plsipt')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('expsionpar')" prop="extInfo">
                    <el-input v-model.trim="addchnForm.extInfo" :placeholder="$t('plsipt')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('remk')" prop="remark">
                    <el-input v-model.trim="addchnForm.remark" :placeholder="$t('plsipt')"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addsmschnForm(addchnForm)" v-preventReClick>{{$t('cfm')}}</el-button>
                <el-button @click="addDialogVisible = false" v-preventReClick>{{$t('cnl')}}</el-button>
            </span>
        </el-dialog>
        <el-dialog :title="$t('mdfy')" :visible.sync="editDialogVisible" width="30%" @close="editDialogVisibleClosed(editchnForm)" center :close-on-click-modal="isOk" :modal-append-to-body="false">
            <el-form :ref="editchnForm" :rules="editchnRules" :model="editchnForm" label-width="80px" :hide-required-asterisk="true">
                <el-form-item :label="$t('chnnumber')" prop="channelCode">
                    <el-input v-model.trim="editchnForm.channelCode" :placeholder="$t('plsipt')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('chnlnam')" prop="channelName">
                    <el-input v-model.trim="editchnForm.channelName" :placeholder="$t('plsipt')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('accnumber')" prop="account">
                    <el-input v-model.trim="editchnForm.account" :placeholder="$t('plsipt')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('pwd')" prop="password">
                    <el-input v-model.trim="editchnForm.password" :placeholder="$t('plsipt')" show-password></el-input>
                </el-form-item>
                <el-form-item :label="$t('requrl')" prop="reqUrl">
                    <el-input v-model.trim="editchnForm.reqUrl" :placeholder="$t('plsipt')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('smschntyp')" prop="channelSmsType">
                    <el-input v-model.trim="editchnForm.channelSmsType" :placeholder="$t('plsipt')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('expsionpar')" prop="extInfo">
                    <el-input v-model.trim="editchnForm.extInfo" :placeholder="$t('plsipt')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('remk')" prop="remark">
                    <el-input v-model.trim="editchnForm.remark" :placeholder="$t('plsipt')"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="editsmschnForm(editchnForm)" v-preventReClick>{{$t('cfm')}}</el-button>
                <el-button @click="editDialogVisible = false" v-preventReClick>{{$t('cnl')}}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {
    getsmsmchannellist,
    addsmschanner,
    deletesmschanner,
    updatesmschanner
} from '@/libs/reqlist.js'
export default {
    data () {
        return {
            total: 0,
            isOk: false,
            addDialogVisible: false,
            editDialogVisible: false,
            smsChnlForm: {
                msgChannelId: null,
                channelSmsType: null,
                channelName: null,
                channelCode: null,
                sign: null,
                status: null,
                sysCreateUid: null,
                sysGmtCreate: null,
                sysModifiedUid: null,
                sysGmtModified: null,
                pageSize: 10,
                pageNum: 1
            },
            smsChnlTab: [],
            addchnForm: {
                channelCode: null,
                channelName: null,
                account: null,
                password: null,
                reqUrl: null,
                channelSmsType: null,
                extInfo: null,
                remark: null
            },
            editchnForm: {
                msgChannelId: null,
                channelCode: null,
                channelName: null,
                account: null,
                password: null,
                reqUrl: null,
                channelSmsType: null,
                extInfo: null,
                remark: null
            },
            addchnRules: {
                channelCode: [
                    { required: true, message: this.$t('cantbeemt'), trigger: 'blur' }
                ],
                channelName: [
                    { required: true, message: this.$t('cantbeemt'), trigger: 'blur' }
                ],
                account: [
                    { required: true, message: this.$t('cantbeemt'), trigger: 'blur' }
                ],
                password: [
                    { required: true, message: this.$t('cantbeemt'), trigger: 'blur' }
                ],
                reqUrl: [
                    { required: true, message: this.$t('cantbeemt'), trigger: 'blur' }
                ],
                channelSmsType: [
                    { required: true, message: this.$t('cantbeemt'), trigger: 'blur' }
                ]
            },
            editchnRules: {
                channelCode: [
                    { required: true, message: this.$t('cantbeemt'), trigger: 'blur' }
                ],
                channelName: [
                    { required: true, message: this.$t('cantbeemt'), trigger: 'blur' }
                ],
                account: [
                    { required: true, message: this.$t('cantbeemt'), trigger: 'blur' }
                ],
                password: [
                    { required: true, message: this.$t('cantbeemt'), trigger: 'blur' }
                ],
                reqUrl: [
                    { required: true, message: this.$t('cantbeemt'), trigger: 'blur' }
                ],
                channelSmsType: [
                    { required: true, message: this.$t('cantbeemt'), trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        seachsmschnList () {
            this.smsChnlForm.pageNum = 1
            this.getsmschnList()
        },
        getsmschnList () {
            getsmsmchannellist(this.smsChnlForm).then(res => {
                if (res.data.code === '000000') {
                    this.total = res.data.data.total - 0
                    this.smsChnlTab = res.data.data.list
                    this.smsChnlTab.forEach(item => {
                        if (item.status === 'VALID') item.status = this.$t('vlid')
                        if (item.status === 'INVALID') item.status = this.$t('invlid')
                    })
                }
            })
        },
        addDialogVisibleClosed (form) {
            this.$refs[form].resetFields()
        },
        showAddchn () {
            this.addDialogVisible = true
        },
        addsmschnForm (form) {
            this.$refs[form].validate((valid) => {
                if (!valid) {
                    return false
                }
                addsmschanner(this.addchnForm).then(res => {
                    if (res.data.code === '000000') {
                        this.$message({
                            message: this.$t('funaddsuc'),
                            type: 'success'
                        })
                        this.addDialogVisible = false
                        this.getsmschnList()
                    } else {
                        this.$message.error(this.$t('unfunaddsuc'))
                    }
                })
            })
        },
        editDialogVisibleClosed (form) {
            this.$refs[form].resetFields()
        },
        showEditsmsChnl (data) {
            this.editchnForm.msgChannelId = data.msgChannelId
            this.editchnForm.channelCode = data.channelCode
            this.editchnForm.channelName = data.channelName
            this.editchnForm.account = data.account
            this.editchnForm.password = data.password
            this.editchnForm.reqUrl = data.reqUrl
            this.editchnForm.channelSmsType = data.channelSmsType
            this.editchnForm.extInfo = data.extTnfo
            this.editchnForm.remark = data.remark
            this.editDialogVisible = true
        },
        editsmschnForm (form) {
            this.$refs[form].validate((valid) => {
                if (!valid) {
                    return false
                }
                updatesmschanner(this.editchnForm).then(res => {
                    if (res.data.code === '000000') {
                        this.$message({
                            message: this.$t('modfunsuc'),
                            type: 'success'
                        })
                        this.editDialogVisible = false
                        this.getsmschnList()
                    } else {
                        this.$message.error(this.$t('modfununsuc'))
                    }
                })
            })
        },
        showDelsmsChnl (msgChannelId) {
            this.$confirm(this.$t('confirmdel'), this.$t('dlte'), {
            cancelButtonText: this.$t('cnl'),
            confirmButtonText: this.$t('cfm')
            }).then(async () => {
                await deletesmschanner({ msgChannelId: msgChannelId }).then(res => {
                    if (res.data.code === '000000') {
                        this.getsmschnList()
                        this.$message({
                            message: this.$t('dltfunsuc'),
                            type: 'success'
                        })
                    }
                    if (res.data.code === '992119') {
                        this.$message.error(this.$t('chndoesnotext'))
                    }
                })
            })
        },
        handleSizeChange (newSize) {
            this.smsChnlForm.pageSize = newSize
            this.getsmschnList()
        },
        // 监听总页数变化
        handleCurrentChange (newNum) {
            this.smsChnlForm.pageNum = newNum
            this.getsmschnList()
        }
    },
    mounted () {
        this.getsmschnList()
    }
}
</script>

<style lang="less" scoped>
@import './smsChnMan.less';
</style>
